import React from "react";
import {
  HashRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import loadable from "./utils/loadable";
import "./style/reset.less";
import "animate.css";
import "./style/base.less";
import "./style/App.less";
import "antd/dist/antd.less";
import img500 from '@/assets/images/500.png'

// 公共模块
const DefaultLayout = loadable(() =>
  import(/* webpackChunkName: 'default' */ "./containers")
);
// 基础页面
const View404 = loadable(() =>
  import(/* webpackChunkName: '404' */ "./views/others/404")
);
const View500 = loadable(() =>
  import(/* webpackChunkName: '500' */ "./views/others/500")
);
const Login = loadable(() =>
  import(/* webpackChunkName: 'login' */ "./views/login/Login")
);
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      hasError: false
    }
  }
  static getDerivedStateFromError(error) {
    console.error(error);
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) {
      return (
        <div style={{ position: 'fixed', left: '50%', top: '50%', transform: 'translate(-50%,-50%)' }}>
          <img src={img500} alt='' />
        </div>
      )
    }
    return (
      <Router>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/500" component={View500} />
          <Route path="/404" component={View404} />
          <Route component={DefaultLayout} />
          <Route path="/" exact render={() => <Redirect to="/home" />} />
        </Switch>
      </Router>
    )
  }
}
export default App;
